<template>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page.sync="pageInfo.page"
    :page-sizes="pageInfo.sizes"
    :page-size="pageInfo.size"
    :pager-count="7"
    background
    layout="total,prev, pager, next, sizes, jumper"
    :total="pageInfo.total"
  >
  </el-pagination>
</template>

<script>
export default {
  name: 'Epagination',
  props: {
    // 分页数据
    pageData: {
      type: Object,
      required: true
    }
  },
  watch: {
    pageData: {
      handler (newVal) {
        // 如果传递进来的数据没有sizes，就使用默认的sizes
        if (!newVal.sizes) {
          newVal.sizes = [20, 50, 100, 500, 1000]
        }
        this.pageInfo = newVal
      },
      immediate: true
    }
  },
  computed: {},
  data () {
    return {
      // 默认选择展示第几个
      pageInfo: {}
    }
  },
  methods: {
    // 选择页码的时候触发的方法
    handleSizeChange (val) {
      this.pageInfo.size = val
      this.$emit('handleSizeChange', this.pageInfo)
    },
    // 除了页码都触发这个事件
    handleCurrentChange (val) {
      this.pageInfo.page = val
      this.$emit('handleCurrentChange', this.pageInfo)
    }
  }
}
</script>

<style lang="scss" scoped></style>
